<template>
	<el-container class="layout-container">
		<!-- 顶部导航栏 -->
		<el-header height="60px">
			<div class="header-container">
				<div class="logo">荷包蛋</div>
				<div class="header-right">
					<el-button link @click="isCollapse = !isCollapse">
						<el-icon color="#fff" size="24">
							<i-ep-Expand v-if="isCollapse" />
							<i-ep-Fold v-else />
						</el-icon>
					</el-button>
					<el-dropdown>
						<span class="user-info">
							管理员 <el-icon><i-ep-ArrowDown /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="userInfoDialog = true"
									>个人信息</el-dropdown-item
								>
								<el-dropdown-item @click="logoutHandler"
									>退出登录</el-dropdown-item
								>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
		</el-header>

		<el-container>
			<!-- 左侧菜单栏 -->
			<el-aside :width="isCollapse ? '64px' : '200px'">
				<el-menu
					:collapse="isCollapse"
					default-active="1"
					class="menu-vertical"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-menu-item index="1" @click="router.push('/store/dashboard')">
						<el-icon><HomeFilled /></el-icon>
						<span>首页</span>
					</el-menu-item>
					<el-sub-menu index="2">
						<template #title>
							<el-icon><Document /></el-icon>
							<span>品管理</span>
						</template>
						<el-menu-item
							index="2-1"
							@click="router.push('/store/product/search')"
							>商品搜索</el-menu-item
						>
						<el-menu-item index="2-2" @click="router.push('/store/product')"
							>商品列表</el-menu-item
						>
						<el-menu-item
							index="2-3"
							@click="router.push('/store/product/history')"
							>操作历史</el-menu-item
						>
					</el-sub-menu>
				</el-menu>
			</el-aside>

			<!-- 右侧内容区域 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

	<!-- Start Generation Here -->
	<el-dialog title="个人信息" v-model="userInfoDialog" width="50%">
		<el-descriptions :border="true" :column="2">
			<el-descriptions-item label="用户名">{{
				store.state.user.username
			}}</el-descriptions-item>
			<el-descriptions-item label="昵称">{{
				store.state.user.nickname
			}}</el-descriptions-item>
			<el-descriptions-item label="邮箱">{{
				store.state.user.email
			}}</el-descriptions-item>
			<el-descriptions-item label="电话">{{
				store.state.user.phone
			}}</el-descriptions-item>
			<el-descriptions-item label="最后登录时间">{{
				store.state.user.lastLoginTime
			}}</el-descriptions-item>
			<el-descriptions-item label="最后登录IP">{{
				store.state.user.lastLoginIp
			}}</el-descriptions-item>
		</el-descriptions>
		<template #footer>
			<el-button @click="userInfoDialog = false">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { CaretBottom, HomeFilled, Document } from '@element-plus/icons-vue'

const store = useStore()
const router = useRouter()
const isCollapse = ref(true)
const userInfoDialog = ref(false)

onMounted(() => {
	const user = store.state.user
	if (!user.login) {
		router.push('/login')
		ElMessage.error('请先登录')
	}
})

const logoutHandler = () => {
	localStorage.removeItem('token')
	store.commit('setLogin', false)
	router.push('/login')
	ElMessage.success('退出登录成功')
}
</script>

<style scoped lang="less">
.layout-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.el-header {
	padding: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-container {
	height: 60px;
	gap: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.logo {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-right {
	flex: 1;
	height: 100%;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background-color 0.3s;
}

.user-info:hover {
	background: rgba(255, 255, 255, 0.1);
}

.el-container {
	flex: 1;
	overflow: hidden;
}

.el-aside {
	/* width: auto; */
	height: 100%;
	overflow: hidden;
	transition: width 0.3s;
	background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.menu-vertical {
	height: 100%;
	border-right: none;
	overflow-x: hidden;
	overflow-y: auto;
}

.menu-vertical::-webkit-scrollbar {
	width: 6px;
}

.menu-vertical::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.menu-vertical::-webkit-scrollbar-track {
	background: transparent;
}

.el-main {
	background-color: #f0f2f5;
	padding: 20px;
	overflow-x: hidden;
	overflow-y: auto;
}

:deep(.el-menu) {
	background: transparent !important;
	border-right: none;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
	color: #fff !important;
	background: transparent !important;
}

:deep(.el-menu-item.is-active) {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
	background: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-sub-menu) {
	background: transparent !important;
}

/* 自定义滚动条样式 */
.el-aside::-webkit-scrollbar,
.el-main::-webkit-scrollbar {
	width: 6px;
}

.el-aside::-webkit-scrollbar-thumb,
.el-main::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.el-main::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1);
}

.el-aside::-webkit-scrollbar-track,
.el-main::-webkit-scrollbar-track {
	background: transparent;
}
</style>
